<template>
    <el-dialog v-model="open" title="Export PI" width="68%" align="left" style="background-color: #f1f1f1;" draggable>


        <table border="1" style="width: 90%;border-collapse:collapse;margin: 0 auto; border: 2px solid #000000;" class="export"
            id="exporttable">
            <tr>
                <td>序号</td>
                <td>PI</td>
                <td>销售</td>
                <td>产品</td>
                <td>采购单</td>
                <td>create_time</td>
                <td>汇率</td>
                <td>销售价</td>
                <td>数量</td>
                <td>采购价(￥)</td>
                <td>Total</td>
                <td>利润(%)</td>
                <td>采购</td>
                <td>利润金额</td>
            </tr>
            <tr v-for="item in list">
                <td>{{ item.x }}</td>
                <td>{{ item.p }}</td>
                <td>{{ item.xs }}</td>
                <td>{{ item.c }}</td>
                <td>{{ item.cgd }}</td>
                <td>{{ item.time }}</td>
                <td>{{ item.h }}</td>
                <td>{{ item.xprice }}</td>
                <td>{{ item.s }}</td>
                <td>{{ item.cprice }}</td>
                <td>{{ item.t }}</td>
                <td>{{ item.Prift }}</td>
                <td>{{ item.caigou }}</td>
                <td>{{ item.lirun }}</td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>总利润</td>
                <td>610399.96</td>
            </tr>
        </table>
        <a download="PI" id="excelOut" href="#" rel="external nofollow"></a>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="exportFun" type="primary"
                    style="border:1px solid #6193D2;color:#ffffff">export</el-button>


                <el-button style="border:1px solid #6193D2;background-color:#ffffff;color:#6193D2"
                    @click="closeWindow">Cancel</el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script  setup>
import { ref } from 'vue'
import * as utils from "../../utils.js"
const prpos = defineProps({
})
const list = ref([
    {
        x: 1,
        p: 'PI12345',
        xs: 'Tiny',
        c: 'HuaWei P40',
        cgd: '123324354',
        time: '2022-09-23',
        h: 1,
        xprice: 12,
        s: 100,
        cprice: 6,
        t: 120,
        Prift: 200,
        caigou: 'Lan',
        lirun: 1280
    }, {
        x: 1,
        p: 'PI12345',
        xs: 'Tiny',
        c: 'HuaWei P40',
        cgd: '123324354',
        time: '2022-09-23',
        h: 1,
        xprice: 12,
        s: 100,
        cprice: 6,
        t: 120,
        Prift: 200,
        caigou: 'Lan',
        lirun: 1280
    }, {
        x: 1,
        p: 'PI12345',
        xs: 'Tiny',
        c: 'HuaWei P40',
        cgd: '123324354',
        time: '2022-09-23',
        h: 1,
        xprice: 12,
        s: 100,
        cprice: 6,
        t: 120,
        Prift: 200,
        caigou: 'Lan',
        lirun: 1280
    }, {
        x: 1,
        p: 'PI12345',
        xs: 'Tiny',
        c: 'HuaWei P40',
        cgd: '123324354',
        time: '2022-09-23',
        h: 1,
        xprice: 12,
        s: 100,
        cprice: 6,
        t: 120,
        Prift: 200,
        caigou: 'Lan',
        lirun: 1280
    }
])

const open = ref(false)
const dialogopen = () => {
    open.value = true
}
const closeWindow = () => {
    open.value = false
}
defineExpose(
    {
        open,
        dialogopen,
    }
)

const exportFun = () => {
    tableToExcel("exporttable", "PI");
}

//base64转码
const base64 = (s) => {
    return window.btoa(unescape(encodeURIComponent(s)));
}
//替换table数据和worksheet名字
const format = (s, c) => {
    return s.replace(/{(\w+)}/g,(m, p)=>{
        return c[p];
    });
}

const tableToExcel = (tableid, sheetName) => {
    var uri = "data:application/vnd.ms-excel;base64,";
    var template =
        '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +
        'xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>' +
        "<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>" +
        "</x:ExcelWorkbook></xml><![endif]-->" +
        ' <style type="text/css">' +
        'table{' +
        "border: 1px solid #000000;" +
        "width:1200px" +
        '}' +
        "table td {" +
        "border: 1px solid #000000;" +
        "width: 120px;" +
        "height: 30px;" +
        "text-align: center;" +
        "color: blank;" +
        " }" +
        "</style>" +
        '</head><body ><table class="excelTable">{table}</table></body></html>';
    if (!tableid.nodeType) tableid = document.getElementById(tableid);
    var ctx = {
        worksheet: sheetName || "Worksheet",
        table: tableid.innerHTML,
    };
    const a = document.getElementById("excelOut");
    a.href = uri + base64(format(template, ctx));
    a.click();
}
</script>

<style lang="less">
.export {
    tr{
        height: 50px;
    }
    td {
      
       text-align: center;
    }
}

img {
    width: 100%;
    height: 100px;
}

.el-input__inner {
    font-family: swis;
}

.el-dialog__title {
    font-weight: bold;
}
</style>